<template>
    <div class="home">
    <el-container>
  <el-header><Header/></el-header>
  <el-container>
    <el-aside width="119px">
      <Sidebar />
    </el-aside>
    <el-main>
     <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
  import Sidebar from "../components/common/Sidebar.vue";
import Header from "../components/common/Header.vue";
export default {
  name: 'Home',
  components: {
    Sidebar,
    Header
  },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped>
html ,body{
  height: 100%;
  padding: 0;
        margin: 0;
}
.home{
  width: 100%;
  height: 100%;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-header{
    background-color: #f4f4f4;
    color: #333;
    height: 64px;
    border-bottom: 1px solid #cac8c8;
  }
  
  .el-aside {
    background-color: #f4f4f4;
    color: #333;
    height: 100%;
    
  }
  
  .el-main {
    
    height: 100%;
  }
</style>
